<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8" />
		<title>用户注册</title>
		<link rel="stylesheet" type="text/css" href="../../lib/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../../lib/layui/css/login.css" />
		<script type="text/javascript" src="../../lib/layui/layui.js"></script>
	</head>

	<body>
		<div class="login-wrapper">
			<div class=" login-body">
				<div class="layui-card">
					<div class="layui-card-header">
						<i class="layui-icon layui-icon-home"></i>&nbsp;&nbsp;用户注册
					</div>
					<div class="layui-card-body layui-form layui-form-pane">
						<!--用户名-->
						<div class="layui-form-item">
							<label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
							<div class="layui-input-inline">
								<input name="username" type="text" required lay-verify="required" autocomplete="off" placeholder="账号" class="layui-input">
							</div>
							<div class="layui-form-mid" style="color: red;">*</div>
						</div>
						<!--密码-->
						<div class="layui-form-item">
							<label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
							<div class="layui-input-inline">
								<input id="password" name="password" type="password" required lay-verify="required" autocomplete="off" placeholder="密码" class="layui-input">
							</div>
							<div class="layui-form-mid" style="color: red;">*</div>
						</div>
						<!--确认密码-->
						<div class="layui-form-item">
							<label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
							<div class="layui-input-inline">
								<input id="confirm-password" name="confirm-password" type="password" required lay-verify="required" autocomplete="off" placeholder="确认密码" class="layui-input">
							</div>
							<div class="layui-form-mid" style="color: red;">*</div>
						</div>
						<!--手机号-->
						<div class="layui-form-item">
							<label class="layui-form-label"><i class="layui-icon layui-icon-cellphone"></i></label>
							<div class="layui-input-inline">
								<input name="telphone" type="text" required lay-verify="required|phone|number" autocomplete="off" placeholder="手机号" class="layui-input">
							</div>
							<div class="layui-form-mid" style="color: red;">*</div>
						</div>
						<!--邮箱-->
						<div class="layui-form-item">
							<label class="layui-form-label"><i class="layui-icon layui-icon-read"></i></label>
							<div class="layui-input-inline">
								<input name="email" type="text" required lay-verify="required|email" autocomplete="off" placeholder="邮箱" class="layui-input">
							</div>
							<div class="layui-form-mid" style="color: red;">*</div>
						</div>
						<!--登录和忘记密码-->
						<div class="layui-form-item">
							<a href="../login.html" class="layui-link">登录</a>
							<a href="forget.html" class="layui-link pull-right">忘记密码？</a>
						</div>
						<!--提交注册-->
						<div class="layui-form-item">
							<button lay-filter="register-submit" class="layui-btn layui-btn-fluid layui-btn-radius" lay-submit>立即提交</button>
						</div>
						<hr />
						<div class="layui-form-item login-other">
							<div>
								<label>其他注册方式方式</label>
							</div>
							<div>
								<a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
								<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
								<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="login-footer">
				<p>© 2019 </p>
			</div>
		</div>

		<script>
			layui.config({
				base: 'module/'
			}).use(['form'], function() {
				var $ = layui.jquery;
				var form = layui.form;

				// 表单提交
				form.on('submit(register-submit)', function(obj) {
					var field = obj.field;

					var password1 = $("#password").val();
					var password2 = $("#confirm-password").val();
					//验证两次密码是否相同
					if(password1 != password2) {
						layer.msg('两次密码不一致', {
							icon: 5,
							time: 1000
						});
						return false;
					}

					$.ajax({
						url: 'http://localhost:8080/user/register',
						data: field,
						contentType: "application/x-www-form-urlencoded",
						type: 'POST',
						xhrFields: {
							withCredentials: true
						},
						success: function(data) {
							if(data.status == "success") {
								layer.msg('注册成功', {
									icon: 1,
									time: 1000
								}, function() {
									//登录后不可再返回登录页
									//location.replace('index.html');
									location.href = "index.html";
								});
							} else {
								layer.msg(data.data.errMsg, {
									icon: 5,
									time:1000
								});
							}
						},
						error: function(xhr) {
							console.log('error');
							console.log(xhr);
							layer.msg('请按F12查看控制台信息', {
								icon: 5,
								time:1000
							});
						}
					});
				});
			});
		</script>
	</body>

</html>